<template>
  <div>
    <data-form
      :formConfig="formConfig"
      v-model="formData"
      ref="form"
      :rules="crawlRule"
    ></data-form>
    <el-button type="primary" @click="crawling">爬取</el-button>
    <p class="desc">备注：爬取的链接优先Web链接，如无Web链接则使用移动端链接</p>
    <search-list :api-url="$url.CrawlTaskList" :itemPerRow="8" ref="crawlContentList">
      <el-table-column label="爬取类型" prop="crawlType">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['crawlTypeSl'](scope.row.crawlType).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="作品类型" prop="kind">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['crawlSl'](scope.row.kind).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="平台" prop="platform">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['crawlPlatformSl'](scope.row.platform).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作人" prop="operator"></el-table-column>
      <el-table-column label="爬取状态" prop="status">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['crawlStatus'](scope.row.status).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="爬取地址" prop="url"></el-table-column>
      <el-table-column label="爬取地址hash" prop="urlHash"></el-table-column>
      <el-table-column label="更新时间" prop="updatedAt"></el-table-column>
    </search-list>
  </div>
</template>
<script>
  import DataForm from 'comp/DynamicForm';
  import { FormRuleConf } from '@/config';
  export default {
    components: {
      DataForm,
    },
    data() {
      return {
        ...FormRuleConf.Crawl,
        formData: {},
        formConfig: {
          inline: false,
          labelPosition: 'right',
          labelWidth: '',
          size: 'normal',
          statusIcon: true,
          disabled: false, // 表单是否可用
          formItemList: [
            {
              key: 'platform',
              type: 'select',
              label: '选择平台',
              value: '',
              options: [
                {
                  label: 'bilibili',
                  value: 1,
                },
                {
                  label: '微博',
                  value: 2,
                },
                {
                  label: '公众号',
                  value: 3,
                },
                {
                  label: '开眼',
                  value: 4,
                },
              ],
            },
            {
              key: 'crawlType',
              label: '列表/单内容',
              type: 'select',
              value: '',
              options: [
                {
                  label: '爬取列表',
                  value: 1,
                },
                {
                  label: '爬取单内容',
                  value: 2,
                },
              ],
            },
            {
              key: 'kind',
              type: 'select',
              label: '内容类型',
              value: '',
              options: [
                {
                  label: '视频',
                  value: 1,
                },
                {
                  label: '文章',
                  value: 2,
                },
              ],
            },
            {
              key: 'url',
              type: 'input',
              label: '填写链接',
            },
            {
              key: 'sub',
              type: 'input',
              label: '微博SUB	',
            },
            {
              key: 'subp',
              type: 'input',
              label: '微博SUBP	',
            },
          ],
        },
      };
    },
    created() {},
    computed: {},
    methods: {
      crawling() {
        this.$refs.form.$children[0].validate((valid) => {
          if (valid) {
            this.$service
              .CrawlScratch(
                { ...this.formData },
                {
                  headers: {
                    'Content-Type': 'application/json',
                  },
                },
              )
              .then((res) => {
                this.$message.success('提交成功');
                this.$refs.crawlContentList.getList();
              })
              .catch((res) => {
                this.$message.error(res.message);
              });
          }
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  /deep/ .el-button--mini,
  .el-button--mini.is-round {
    margin-left: 120px;
  }
  .desc {
    margin-top: 20px;
    margin-left: 120px;
  }
</style>
